<template>
  <view :class="theme">
    <view class="flex-row justify-around items-center text-28 fw-bold p-30 m-30 b-rounded-30"
      style="background-image: linear-gradient(37deg,rgba(8, 23, 49, 0.6),rgba(39, 8, 39, 0.6)); backdrop-filter: blur(30rpx);">
      <view @click="uniNavigator({ url: '/pages/client/main/bill?type=1' })" class="items-center">
        <text class="color-label">龙珠</text>
        <text class="mt-20 color-stress">{{ userInfo.coin || 0 }}</text>
      </view>
      <uv-line direction="col" length="60" color="rgba(255,255,255,0.3)" />
      <view @click="uniNavigator({ url: '/pages/client/main/bill?type=2' })" class="items-center">
        <text class="color-label">碎片</text>
        <text class="mt-20 color-stress">{{ userInfo.coin_money || 0 }}</text>
      </view>
      <uv-line direction="col" length="60" color="rgba(255,255,255,0.3)" />
      <view @click="uniNavigator({ url: '/pages/client/main/bill?type=3' })" class="items-center">
        <text class="color-label">仓库</text>
        <text class="mt-20 color-stress">{{ userInfo.money || 0 }}</text>
      </view>
    </view>

    <view class="bg-section b-rounded-20 p-50" style="margin: 30rpx 50rpx;">
      <view class="flex-row h-100 items-center bg-base b-rounded-20 pl-30 pr-30">
        <input v-model="formData.number" class="flex-1 text-26 h-full text-center"
          :placeholder="`请输入${transformOrder[0].text}数量`" type="number">
      </view>

      <view @click="reverse" class="m-30 items-center">
        <uv-icon size="108" color="92" name="/static/img/icon-transform.png" />
      </view>
      <view class="mt-30 flex-row h-100 items-center justify-center bg-base b-rounded-20 pl-30 pr-30">
        <text class="text-30 text-center">{{ transformOrder[1].text }}</text>
      </view>

      <view class="mt-30 ml-30 mr-30 text-26 fw-bold">
        <label class="justify-between">
          <text>划转到{{ transformOrder[1].text }}</text>
          <text>手续费({{ transformOrder[1].radio }}%)</text>
        </label>
      </view>
    </view>

    <button @click="beforeTransfer" hover-class="op-[0.6]"
      class="items-center justify-center bg-primary lh-100 color-base text-36 fw-bold b-rounded-50 m-50">
      确认
    </button>

    <pay-password v-model="formData.password" @finish="transfer" ref="passwordPopup" />
  </view>
</template>

<script lang="ts" setup>
import { useMapState } from "@/common/libs/store";
import { sleep, uniNavigator } from "@/common/libs/utils";
import { onLoad, onNavigationBarButtonTap } from "@dcloudio/uni-app";
import { ref, reactive } from "vue";

const { theme } = useMapState(["theme"]);
const userInfo = reactive<AnyObject>({});
const { $config = {} } = getApp().globalData || {};

const formData = reactive({
  password: "",
  number: "",
});

const transformOrder = ref([
  { text: "龙珠", type: 1, radio: 0 },
  { text: "仓库", type: 2, radio: 20 },
]);

const passwordPopup = ref({} as AnyObject);

onNavigationBarButtonTap(() => {
  uniNavigator({ url: "/pages/client/mine/integralLogs" })
});

onLoad(() => {
  getInfo();
});

const getInfo = () => {
  uni.request({
    url: $config.API_USER_INFO_GET,
    success({ data }: any) {
      Object.assign(userInfo, data, data.userData);
      uni.hideToast();
    },
  });
}

const beforeTransfer = () => {
  if (!formData.number) {
    return uni.showToast({ title: "请输入划转数量", icon: "none" });
  }
  passwordPopup.value.change(true);
}

const transfer = () => {
  passwordPopup.value.change(false);
  uni.request({
    url: "/cloudExchange",
    data: {
      coin: formData.number,
      pay_pass: formData.password,
      type: transformOrder.value[1].type
    },
    async success({ msg: title }: AnyObject) {
      uni.showToast({ title, duration: 1000 });
      await sleep(1);
      getInfo();
    }
  });
  formData.password = "";
}

const reverse = () => {
  transformOrder.value = transformOrder.value.reverse();
}


</script>

<style lang="scss" scoped>
// scss
</style>